<template>
  <div class="father">
    <h2>父组件</h2>
    <br>
    <div>父组件接收到的子组件传递来的数据 {{ fromChild }}</div>
    <br>
    <div>ref获得的数据--{{ refVal }}</div>
    <br>
    <Children ref="foo" @add="cartAdd($event)" name="jack" age='18'></Children>
    <br>
    <Children1></Children1>
    <br>
    <Children2></Children2>
  </div>
</template>
<script>
import Children from './Children/Children.vue'
import Children1 from './Children/Children1.vue'
import Children2 from './Children/Children2.vue'
export default{
  components:{ Children,Children1,Children2 },
  data(){
    return{
      fromChild:'',
      refVal:''
    }
  },
  created(){

  },
  mounted(){
    // 通过ref拿子组件的数据最早要在mounted函数中，因为这个时候dom才渲染完成
    console.log(this.$refs.foo);
    this.refVal = this.$refs.foo.refVal // 获取子组件实例，通过子组件实例我们就能拿到对应的数据 // 获取子组件实例，通过子组件实例我们就能拿到对应的数据
  },
  methods:{
    cartAdd(e){
      console.log(e);
      this.fromChild = e
    }
  }
}
</script>
<style lang="scss" scoped>
.father{
  background-color: aquamarine;
}
</style>
